<template>
  <div class="app-container">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body content_h">
      <el-col class="title_top">
        <div class="title_top_E">Platform Management</div>
        <div class="title_top_C">部门管理</div>
      </el-col>
      <el-col class="screen_case">
        <div class="screen_case_amount screen_caseMD">
          <span class="screen_case_amount_lable">部门数量：</span>
          <span class="screen_case_amount_value">{{total}}</span>
        </div>
        <construction title="新建部门" @addition="additions" class="screen_caseMD"/>
        <screenSelect title="部门名称" type='input' v-model="addFrom.departmentName" :isValue='addFrom.departmentName' placeholder="请输入部门名称"
          @transfer="valueHeld($event, 'departmentName')" class="screen_caseMD"/>
        <el-button type="primary" class="ch_button screen_caseMD" @click="search">
          <img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
          <div>搜索</div>
        </el-button>
        <el-button type="primary" class="ch_button screen_caseMD" @click="reset">
          <img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
          <div>选项重置</div>
        </el-button>
      </el-col>

    </el-row>
    <el-row :gutter="0" class="card_content">
      <template v-for="(item, index) in cardData">
        <smallCard :title="item.departmentName" :subhead="'员工数量：'+item.totalStaff" subheading="" :img="item.avatarUrl"
          @clickHeld="multifunction($event, item.id)" :line="item.status==0?true:false" buttons="2" type="department" />
      </template>
      <div class="paginationblock" v-if="cardData.length > 0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
    </el-row>
    <el-dialog id="viewHeld" custom-class="eldialogCH"  :modal="true" :visible.sync="viewHeld" :show-close='false' center>
      <div slot="title" class="dialog_title_ch">
        <div>
          <div class="dialog_title_ch_subheading">
            Department Information Details
          </div>
          <div class="dialog_title_ch_subhead">
            部门信息详情
          </div>
        </div>
        <div class="icon_x-circle" @click="viewHeld = false"></div>
        <!-- <img class="icon_x-circle" src="../../assets/iconfont/x-circle.png" alt="" @click="viewHeld = false"> -->
      </div>
      <div class="dialog_title_ch_conter">
        <div class="dialog_title_ch_conter_left">
          <img :src="viewFrom.avatarUrl" alt="" srcset="" style="border-radius: 50%;">
          <div class="quan" :class="viewFrom.status==0? 'on_line' : 'off_line'"></div>
        </div>
        <div class="dialog_title_ch_conter_right">
          <div class="postTitle">{{ viewFrom.departmentName }}</div>
          <div class="postTitle_conter">
            <div class="postTitle_conter_item">
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">部门负责人：</span>
                <span class="postTitle_conter_itemspan2">{{viewFrom.contacts}}</span>
              </div>
            </div>
            <div class="postTitle_conter_item">
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">联系电话：</span>
                <span class="postTitle_conter_itemspan2">{{ viewFrom.phone }}</span>
              </div>
            </div>
            <div class="postTitle_conter_item">
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">员工数量：</span>
                <span class="postTitle_conter_itemspan2">{{viewFrom.totalStaff}}</span>
              </div>
            </div>
            <div class="postTitle_conter_item">
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">创建时间：</span>
                <span class="postTitle_conter_itemspan2">{{parseTime(viewFrom.createTime,'{y}.{m}.{d}')}}</span>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="dialog_title_ch_conter_table">
        <el-table :data="tableData" max-height='357' style="width: 100%" header-row-class-name="hrcn"
          row-class-name="rcn">
          <el-table-column label="员工编号" align="center">
            <template slot-scope="scope">
              {{ scope.row.userNo }}
            </template>
          </el-table-column>
          <el-table-column label="员工名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column label="头像" align="center">
            <template slot-scope="scope">
              <img class="userimg_b" :src="scope.row.userAvatarUrl" alt="" style="border-radius: 50%;">
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <div class="status_cl" :class="scope.row.isEnabled == 0 ? 'on_linebg' : 'off_linebg'"></div>
            </template>
          </el-table-column>
          <el-table-column label="职称" align="center">
            <template slot-scope="scope">
              {{ scope.row.roleName }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
              {{parseTime(scope.row.createTime,'{y}.{m}.{d}')}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import {getDepartList,getDepartDetail,getDepartPageList} from '@/api/department'
import {getByDeptId} from '@/api/user'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Field",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  data() {
    return {
      viewHeld: false,
      editHeld: false,
      familyHeld: false,
      cardData: [
      ],
      tableData: [],
      viewFrom:{},
      pageData: {
					pageNo: 1,
					pageSize: 10
				},
        addFrom:{departmentName:''},
        total:0
    };
  },
  mounted() {
    this.getList()
   },

  methods: {
    getList(){
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getDepartPageList(this.addFrom,this.pageData).then(res=>{
        if(res.code==200){
          this.cardData = res.data.deptPage.records
          this.total = res.data.deptPage.total
          loading.close()
        }
      })
    },
    additions() {
      this.$router.push({path:`/department/departmentedit/0`})
    },
    tabGo() {
      this.$router.go(-1)
    },
    search() {
      this.pageData={
					pageNo: 1,
					pageSize: 10
				}
      this.getList()
    },
    reset() {
      this.addFrom={departmentName:''},
      this.getList()
    },
    valueHeld(childParam, fatherparam) {
      this.addFrom[fatherparam] = childParam
    },
    multifunction(e, id) {
      if (e == 'editHeld') {
        this.$router.push({
          path: `/department/departmentedit/${id}`
        })
      } else if (e == 'viewHeld') {
        this.cardData.map(item=>{
          if(item.id==id){
            this.viewFrom = item
          }
        })
        // getDepartDetail(id).then(res=>{
        //   if(res.code == 200){
        //     this.viewFrom = res.data.department
        //   }
        // })
        getByDeptId(id).then(res=>{
          if(res.code == 200){
            this.tableData = res.data.userList
          }
        })
        this[e] = true
      }
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageData.pageNo = val
      this.getList()
    },

  }
}
</script>
<style lang="scss" scoped>
.card_content {
  margin-top: 16px;
  height: calc(100% - 170px);
  overflow-y: auto;
}

.card_contents {
  height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card_contents_tex {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .card_contents_footer {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EFEFEF;
  }
}

.content_h {
  min-height: 149px;
  border-radius: 5px;
  padding: 0px;
}

.title_top {
  min-height: 79px;
  border-bottom: 1px solid #EFEFEF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
}

.title_tops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  height: 79px;
  border-bottom: 1px solid #EFEFEF;

  .title_tops_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .title_tops_b {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    cursor: pointer;

    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      color: #000;
    }
  }
}

.screen_case_title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-right: 35px;
}

.title_top_E {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.title_top_C {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.screen_case {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px 30px;
}

.screen_case_amount {
  .screen_case_amount_lable {
    font-size: 15px;
    color: #989898;
  }

  .screen_case_amount_value {
    font-size: 16px;
    color: #000;
  }
}

::v-deep .el-button.ch_button {
  padding: 8px 9px;
}

::v-deep .el-button.ch_button span {
  display: flex;
  align-items: center;

  div {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
  }
}

#viewHeld,
#editHeld,
#familyHeld {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .eldialogCH {
  border-radius: 6px;
  max-width: 1268px;
  margin-top: 0 !important;
}

::v-deep #editHeld .eldialogCH {
  width: 1579px;
}

::v-deep .ch_button_seav {
  padding: 7px 27px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 16px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}

.ch_button_img_seav {
  width: 24px;
  height: 24px;
}

.ch_button_img {
  width: 16px;
  height: 16px;
}

.dialog_title_ch {
  border-bottom: 1px solid #EFEFEF;
  padding: 25px 21px 13px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon_x-circle {
  width: 24px;
  height: 24px;
  background: url(../../assets/iconfont/x-circle.png);
  background-size: 100% 100%;
  cursor: pointer;
}

.icon_x-circle:active {
  background: url(../../assets/iconfont/x-circleactive.png);
  background-size: 100% 100%;
  // opacity: .6;
}

::v-deep #viewHeld .el-dialog__header,
::v-deep #editHeld .el-dialog__header,
::v-deep #familyHeld .el-dialog__header {
  padding: 0 !important;
  text-align: left;
}

::v-deep #viewHeld .el-dialog__body,
::v-deep #editHeld .el-dialog__body,
::v-deep #familyHeld .el-dialog__body {
  padding: 17px 20px;
}

::v-deep #editHeld .el-dialog__footer {
  padding: 17px 20px;
  border-top: 1px solid #EFEFEF;
}

.dialog_title_ch_subheading {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.dialog_title_ch_subhead {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.dialog_title_ch_conter_operate {
  padding: 24px 35px;
  // border: 1px solid #EBEBEB;
  border-radius: 2px;
  display: flex;
  // align-items: center;
}

.dialog_title_ch_conter {
  padding: 24px 35px;
  border: 1px solid #EBEBEB;
  border-radius: 2px;
  display: flex;
  // align-items: center;

  .dialog_title_ch_conter_left {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 33px;

    img {
      width: 100%;
      height: 100%;
    }

    .quan {
      position: absolute;
      bottom: 0;
      right: 0;
      border: 2px solid #FFFFFF;
      width: 20px;
      height: 20px;
      border-radius: 100%;
    }
  }


  .dialog_title_ch_conter_right {
    flex: 1;
  }

  .postTitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
    color: #000;
  }

  .postTitle_conter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .postTitle_conter_item {
      flex: 1;
      margin-right: 20px;
      white-space: nowrap;

      .postTitle_conter_itemspan {
        margin: 8px 0;

        .postTitle_conter_itemspan1 {
          font-size: 15px;
          font-weight: 400;
          color: #989898;
        }

        .postTitle_conter_itemspan2 {
          font-size: 16px;
          font-weight: 400;
          color: #000;
        }
      }
    }
  }
}

.dialog_title_ch_conter_table {
  margin-top: 16px;
  border: 1px solid #EFEFEF;
  border-radius: 2px;
}

.on_line {
  background-color: #19CDA6;
}

.off_line {
  background-color: #FE294D;
}

/*
  编辑
  */
.editHeld_conter_left {
  margin-right: 70px;
  text-align: center;
}

.editHeld_conter_right {
  flex: 1;

  .el-row {
    margin-bottom: 45px;
  }
}

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
}

// ::v-deep  .avatar-uploader .el-upload:hover {
//   border-color: #409EFF;
// }
.editHeld_conter_left .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.editHeld_conter_left .avatar {
  width: 160px;
  height: 160px;
  display: block;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000066;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFFAA;
  }
}


//表格
::v-deep .hrcn th {
  background-color: #FFFFFF;
  color: #989898;
  font-size: 15px;
  font-weight: 400;
}

::v-deep .hrcn th .cell {
  border-right: 1px solid #EFEFEF;
}

::v-deep .hrcn th:last-child .cell {
  border-right: none;
}

::v-deep .rcn {
  color: #000;
  font-size: 16px;
  font-weight: 400;
}

.userimg_b {
  width: 48px;
  height: 48px;
}

.status_cl {
  width: 17px;
  height: 17px;
  border-radius: 100%;
  display: inline-block;
}

.on_linebg {
  background: url(../../assets/iconfont/zaixian.png);
  background-size: 100% 100%;
}

.off_linebg {
  background: url(../../assets/iconfont/lixian.png);
  background-size: 100% 100%;
}

::v-deep .dialog_title_ch_conter_table .el-table__body-wrapper {
  height: calc(100% - 50px);
}
</style>
